<template>
    <div class="main">
        <div class="home-title">激光清障仪管控平台</div>
        <div class="content">
            <main-sidebar />
            <div style="flex: 1; height: 100%" class="middle">
                <keep-alive>
                    <router-view />
                </keep-alive>
            </div>
            <div class="right">
                <equipmentProfile />
                <facilityMove />
            </div>
        </div>
    </div>
</template>

<script>
import equipmentProfile from '@/components/equipmentProfile';
import facilityMove from '../components/facilityMove.vue';
import mainSidebar from '@/components/main-sidebar';
export default {
    name: 'baseMain',
    components: {equipmentProfile, facilityMove, mainSidebar},
    data() {
        return {};
    },
    methods: {},
};
</script>

<style scoped lang="scss">
/* 组件样式 */
.main {
    background-image: url('@/assets/img/bg.png');
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;

    .content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        // border: 1px solid red;
        height: calc(100vh - 70px);
        padding: 20px;
        .middle {
            max-width: calc(100% - 350px - 220px);
        }
        .right {
            height: 100%;
            width: 350px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
    }
}

.home-title {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 9px;
    text-align: center;
    background-image: url('@/assets/img/top-title.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    line-height: 70px;
}

.register-box {
    width: 500px;
    height: 410px;
    background-image: url('@/assets/img/register.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    transform: translateY(200px);
}
</style>
